<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>至誉科技 - 周战报</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;700;900&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 主红色
                        secondary: '#F5A623', // 金色
                        darkRed: '#A80724',
                        lightGold: '#FFE8CC',
                        gold: '#D4AF37'
                    },
                    fontFamily: {
                        sans: ['SimHei', 'Microsoft YaHei', 'sans-serif'],
                        display: ['"Ma Shan Zheng"', 'cursive'],
                        stkaiti: ['"STKaiti"', '"KaiTi"', '"华文行楷"', 'cursive'],
                        // 主要使用的字体
                        main: ['"Noto Sans SC"', 'sans-serif'],
                        kuaiLe: ['"ZCOOL KuaiLe"', 'sans-serif']
                    }
                }
            }
        };
    </script>
    <style>
        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .text-shadow-lg {
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
        }
        .bg-gradient-red {
            background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%);
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        /* 红色光线背景动画效果 - 优化版 */
        .dynamic-light-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            /* 硬件加速 */
            transform: translateZ(0);
            will-change: transform;
        }
        .light-beam {
            position: absolute;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transform-origin: bottom left;
            opacity: 0;
            /* 硬件加速 */
            transform: translateZ(0);
        }
        /* 合并多个beamMove动画为更少的几个，减少重绘 */
        @keyframes beamMove1 {
            0% { opacity: 0; transform: rotate(-15deg) scaleY(0); }
            10% { opacity: 0.5; transform: rotate(-15deg) scaleY(1); }
            90% { opacity: 0.5; transform: rotate(-15deg) scaleY(1); }
            100% { opacity: 0; transform: rotate(-15deg) scaleY(0); }
        }
        @keyframes beamMove2 {
            0% { opacity: 0; transform: rotate(5deg) scaleY(0); }
            10% { opacity: 0.6; transform: rotate(5deg) scaleY(1); }
            90% { opacity: 0.6; transform: rotate(5deg) scaleY(1); }
            100% { opacity: 0; transform: rotate(5deg) scaleY(0); }
        }
        @keyframes beamMove3 {
            0% { opacity: 0; transform: rotate(20deg) scaleY(0); }
            10% { opacity: 0.4; transform: rotate(20deg) scaleY(1); }
            90% { opacity: 0.4; transform: rotate(20deg) scaleY(1); }
            100% { opacity: 0; transform: rotate(20deg) scaleY(0); }
        }
        /* 优化的闪光点动画 */
        @keyframes sparkle {
            0% { opacity: 0.2; }
            50% { opacity: 0.8; transform: scale(1.1); }
            100% { opacity: 0.2; }
        }
        .sparkle {
            position: absolute;
            background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            /* 性能优化 */
            will-change: opacity, transform;
        }
        .gold-curve {
            position: absolute;
            background: linear-gradient(135deg, rgba(255,228,181,0.3) 0%, rgba(255,215,0,0.2) 50%, rgba(255,228,181,0.3) 100%);
            border-radius: 50%;
        }
        
        /* 优化的横幅闪光动画 */
        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .animate-shine {
            animation: shine 4s infinite linear;
            will-change: transform;
        }
        
        /* 优化的文字发光效果 */
        .text-shadow-glow {
            text-shadow: 
                0 0 5px rgba(255,255,255,0.8),
                0 0 10px rgba(255,255,255,0.4);
        }
    </style>
</head>
<body class="min-h-screen overflow-x-hidden relative">
    <!-- 动态红色光线背景 -->
    <div class="dynamic-light-bg bg-gradient-to-b from-[#C41E3A] via-[#A80724] to-[#8B0000]">
        <!-- 光线束 - 优化版 -->
        <!-- 减少光线数量，添加will-change属性 -->
        <div class="light-beam top-0 left-1/4 w-40 h-[200%]" style="animation: beamMove1 10s ease-in-out infinite;
            will-change: opacity, transform;"></div>
        <div class="light-beam top-0 left-1/2 w-80 h-[220%]" style="animation: beamMove2 12s ease-in-out infinite 2s;
            will-change: opacity, transform;"></div>
        <div class="light-beam top-0 left-3/4 w-70 h-[240%]" style="animation: beamMove3 14s ease-in-out infinite 4s;
            will-change: opacity, transform;"></div>
        
        <!-- 闪光点 -->
        <div class="sparkle w-12 h-12 top-[10%] left-[15%]" style="animation: sparkle 4s ease-in-out infinite;"></div>
        <div class="sparkle w-8 h-8 top-[20%] left-[70%]" style="animation: sparkle 6s ease-in-out infinite 1s;"></div>
        
        <!-- 金色曲线装饰 -->
        <div class="gold-curve w-[40vw] h-[40vw] -bottom-[20vw] left-0"></div>
    </div>

    <!-- 主容器 -->
    <div class="container mx-auto px-4 py-8 relative z-10">
        <!-- 顶部区域：左侧至誉科技，右侧倒计时和周战报 -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-start mb-2">
            <!-- 左侧：至誉科技和百日奋战标签 -->
            <div>

                <!-- 至誉科技 -->
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white text-shadow-lg tracking-wider">
                    至誉科技
                </h1>
                
                <!-- 百日奋战标签放在至誉科技下面 -->
                <div class="mt-4">
                    <div class="inline-block bg-secondary/20 text-white px-4 py-1 rounded-full backdrop-blur-sm">
                        <span class="text-sm md:text-base">百日奋战 · 决胜2025</span>
                    </div>
                </div>
            </div>
            
            <!-- 右侧：倒计时和周战报 -->
            <div class="mt-8">
                <!-- 倒计时：互换字体大小 -->
                <div id="countdown" class="bg-secondary/80 text-white px-4 py-2 rounded-lg shadow-lg backdrop-blur-md z-10 text-center transform scale-150">
                    <!-- 标题使用较大字体 -->
                    <div class="text-sm md:text-base font-bold">2025年度倒计时</div>
                    <!-- 虚线分隔 -->
                    <div class="border-t border-dashed border-white/70 my-1"></div>
                    <!-- 计时器使用较小字体 -->
                    <div class="text-xs md:text-sm font-bold mt-1" id="countdown-timer">--天--时--分--秒</div>
                </div>
                

            </div>
        </div>

        <!-- 激励标语 - 魏碑字体风格 -->
         <div class="text-center my-6 md:my-8 animate-float">
             <!-- 魏碑风格字体 - 方正刚健，有传统书法的气势和棱角感 -->
             <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-weibei font-black italic text-white leading-tight 
                text-shadow-[0_0_5px_rgba(255,255,255,0.8),0_0_10px_rgba(255,255,255,0.6),0_0_15px_rgba(255,0,0,0.5)] 
                tracking-wider will-change: transform">
                 一群人<br class="md:hidden">
                 <span class="text-secondary">一场仗</span><br class="md:hidden">
                 一定赢
             </p>
            
            <!-- 选项2: 毛笔艺术体 -->
            <!-- <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-art2 font-black italic text-white leading-tight text-shadow-[0_0_10px_rgba(255,255,255,0.8),0_0_20px_rgba(255,255,255,0.6),0_0_30px_rgba(255,0,0,0.7)] tracking-wider transform hover:scale-105 transition-transform duration-300 animate-pulse">
                一群人<br class="md:hidden">
                <span class="text-secondary">一场仗</span><br class="md:hidden">
                一定赢
            </p> -->
            
            <!-- 选项3: 现代活力体 -->
            <!-- <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-art3 font-black italic text-white leading-tight text-shadow-[0_0_10px_rgba(255,255,255,0.8),0_0_20px_rgba(255,255,255,0.6),0_0_30px_rgba(255,0,0,0.7)] tracking-wider transform hover:scale-105 transition-transform duration-300 animate-pulse">
                一群人<br class="md:hidden">
                <span class="text-secondary">一场仗</span><br class="md:hidden">
                一定赢
            </p> -->
            
            <!-- 选项4: 综艺艺术体 -->
            <!-- <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-art4 font-black italic text-white leading-tight text-shadow-[0_0_10px_rgba(255,255,255,0.8),0_0_20px_rgba(255,255,255,0.6),0_0_30px_rgba(255,0,0,0.7)] tracking-wider transform hover:scale-105 transition-transform duration-300 animate-pulse">
                一群人<br class="md:hidden">
                <span class="text-secondary">一场仗</span><br class="md:hidden">
                一定赢
            </p> -->
            
            <!-- 选项5: 西方艺术体 -->
            <!-- <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-art5 font-black italic text-white leading-tight text-shadow-[0_0_10px_rgba(255,255,255,0.8),0_0_20px_rgba(255,255,255,0.6),0_0_30px_rgba(255,0,0,0.7)] tracking-wider transform hover:scale-105 transition-transform duration-300 animate-pulse">
                一群人<br class="md:hidden">
                <span class="text-secondary">一场仗</span><br class="md:hidden">
                一定赢
            </p> -->
            
            <!-- 选项6: 中国传统宋体 -->
            <!-- <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-chinese font-black italic text-white leading-tight text-shadow-[0_0_10px_rgba(255,255,255,0.8),0_0_20px_rgba(255,255,255,0.6),0_0_30px_rgba(255,0,0,0.7)] tracking-wider transform hover:scale-105 transition-transform duration-300 animate-pulse">
                一群人<br class="md:hidden">
                <span class="text-secondary">一场仗</span><br class="md:hidden">
                一定赢
            </p> -->
            
            <!-- 选项7: 现代简约体 -->
            <!-- <p class="text-[clamp(3rem,12vw,7.5rem)] font-bold font-modern font-black italic text-white leading-tight text-shadow-[0_0_10px_rgba(255,255,255,0.8),0_0_20px_rgba(255,255,255,0.6),0_0_30px_rgba(255,0,0,0.7)] tracking-wider transform hover:scale-105 transition-transform duration-300 animate-pulse">
                一群人<br class="md:hidden">
                <span class="text-secondary">一场仗</span><br class="md:hidden">
                一定赢
            </p> -->
        </div>

        <!-- 2025百日奋战横幅 - 下个版本 -->
        <div class="my-4 flex justify-center items-center">
            <!-- 横幅背景装饰 -->
            <div class="relative">
                <!-- 改进的横幅 -->
                <div class="relative bg-darkRed text-white py-3 px-8 text-center transition-all hover:scale-105 duration-300 shadow-2xl inline-block mx-auto rounded-md border-4 border-transparent bg-clip-padding">
                    <!-- 科技感边框效果 -->
                    <div class="absolute inset-0 -z-10 rounded-md bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-500 animate-pulse [mask-image:linear-gradient(to_bottom,transparent,black_5%,black_95%,transparent)]"></div>
                    
                    <!-- 装饰光晕背景 -->
                    <div class="absolute -inset-1 bg-gradient-to-r from-secondary/30 via-transparent to-secondary/30 opacity-0 hover:opacity-100 transition-opacity duration-500 blur-sm"></div>
                    
                    <!-- 主标题 - 缩小字体 -->
                    <h3 class="relative z-10 text-[clamp(1.4rem,3vw,2.2rem)] font-bold tracking-[0.5em] text-center">2025百日奋战</h3>
                    


                </div>
            </div>
        </div>

        <!-- 数据卡片 -->
        <div class="bg-lightGold/90 rounded-2xl shadow-2xl p-6 md:p-10 my-12 relative overflow-hidden">
            <!-- 装饰角落 -->
            <div class="absolute top-4 left-4 w-10 h-10 border-t-4 border-l-4 border-primary rounded-tl"></div>
            <div class="absolute top-4 right-4 w-10 h-10 border-t-4 border-r-4 border-primary rounded-tr"></div>
            <div class="absolute bottom-4 left-4 w-10 h-10 border-b-4 border-l-4 border-primary rounded-bl"></div>
            <div class="absolute bottom-4 right-4 w-10 h-10 border-b-4 border-r-4 border-primary rounded-br"></div>

            <!-- 周战报：放在数据卡片内部 -->
            <div class="flex justify-center items-center mt-1 mb-4">
                <i class="fa fa-trophy text-secondary text-2xl md:text-3xl mr-3 animate-pulse"></i>
                <h2 class="text-[clamp(2.7rem,6vw,4.5rem)] font-display text-darkRed text-shadow">周战报</h2>
                <i class="fa fa-trophy text-secondary text-2xl md:text-3xl ml-3 animate-pulse"></i>
            </div>

            <!-- 数据指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-4">
                <!-- 年度销售完成比 -->
                <div class="text-center p-6 bg-white/50 rounded-xl shadow-md transform transition-all duration-300 hover:scale-105">
                    <div class="bg-primary text-white inline-block px-6 py-2 rounded-full mb-6 text-2xl md:text-3xl font-bold">
                        年度销售完成比
                    </div>
                    <div class="text-[clamp(3rem,10vw,6rem)] font-bold text-primary mb-4 cursor-pointer" id="sales-completion-container">
                        <span id="sales-completion-value">66.32</span>%
                    </div>
                    <div class="hidden" id="sales-completion-edit-area">
                        <input type="number" id="sales-completion-input" class="text-[clamp(3rem,10vw,6rem)] font-bold text-primary mb-4 text-center w-full" value="66.32" min="0" max="100" step="0.01">
                        <button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/80 transition-colors" onclick="saveEdit('sales-completion')">保存</button>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3 mb-2">
                        <div class="bg-primary h-3 rounded-full" id="sales-progress-bar" style="width: 66.32%"></div>
                    </div>
                </div>

                <!-- 去库存达标率 -->
                <div class="text-center p-6 bg-white/50 rounded-xl shadow-md transform transition-all duration-300 hover:scale-105">
                    <div class="bg-primary text-white inline-block px-6 py-2 rounded-full mb-6 text-2xl md:text-3xl font-bold">
                        去库存达标率
                    </div>
                    <div class="text-[clamp(3rem,10vw,6rem)] font-bold text-primary mb-4 cursor-pointer" id="inventory-container">
                        <span id="inventory-value">0</span>%
                        <span id="inventory-arrow" class="ml-2" style="font-size: 100%;"></span>
                    </div>
                    <div class="hidden" id="inventory-edit-area">
                        <input type="number" id="inventory-input" class="text-[clamp(3rem,10vw,6rem)] font-bold text-primary mb-4 text-center w-full" value="0" min="0" max="100" step="0.01">
                        <button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/80 transition-colors" onclick="saveEdit('inventory')">保存</button>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3 mb-2">
                        <div class="bg-primary h-3 rounded-full" id="inventory-progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>

            <!-- 报告周期 -->
            <div class="mt-8 text-center text-black cursor-pointer" id="date-container">
                <p class="text-2xl font-bold">播报周期 (<span id="date-range">2025/10/7 — 2025/10/14</span>)</p>
            </div>
            <div class="flex justify-center mt-4 space-x-4 hidden" id="date-inputs">
                <input type="date" id="start-date" class="px-3 py-2 border border-gray-300 rounded" value="2025-10-07">
                <span class="text-gray-600">—</span>
                <input type="date" id="end-date" class="px-3 py-2 border border-gray-300 rounded" value="2025-10-14">
                <button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/80 transition-colors" onclick="saveDateRange()">保存</button>
            </div>

            <!-- 页脚信息 -->
            <div class="mt-6 text-center text-gray-500 text-sm">
                <p>2025 | ZHIYUKEJI | Weekly News Report</p>
            </div>
        </div>
    </div>

    <script>
        // 存储上次值用于比较
        let previousValues = {
            'sales-completion': 66.32,
            'inventory': 0
        };

        // 缓存DOM元素引用
        const domCache = {};
        
        // 获取DOM元素（带缓存）
        function getElement(id) {
            if (!domCache[id]) {
                domCache[id] = document.getElementById(id);
            }
            return domCache[id];
        }
        
        // 编辑功能 - 优化版
        function toggleEdit(type) {
            const containerId = type === 'sales-completion' ? 'sales-completion-container' : 'inventory-container';
            const editAreaId = type === 'sales-completion' ? 'sales-completion-edit-area' : 'inventory-edit-area';
            
            const container = getElement(containerId);
            const editArea = getElement(editAreaId);
            
            // 开始编辑
            container.classList.add('hidden');
            editArea.classList.remove('hidden');
            
            // 聚焦输入框
            const input = getElement(type + '-input');
            input.focus();
        }
        
        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }
        
        // 保存编辑 - 优化版
        const saveEdit = debounce(function(type) {
            const containerId = type === 'sales-completion' ? 'sales-completion-container' : 'inventory-container';
            const editAreaId = type === 'sales-completion' ? 'sales-completion-edit-area' : 'inventory-edit-area';
            
            const container = getElement(containerId);
            const editArea = getElement(editAreaId);
            const input = getElement(type + '-input');
            
            const value = parseFloat(input.value);
            if (!isNaN(value) && value >= 0 && value <= 100) {
                // 保留两位小数
                const formattedValue = value.toFixed(2);
                getElement(type + '-value').textContent = formattedValue;
                
                // 获取进度条元素 - 修复销售完成比进度条ID的引用
                const progressBarId = type === 'sales-completion' ? 'sales-progress-bar' : 'inventory-progress-bar';
                const progressBar = getElement(progressBarId);
                
                // 使用requestAnimationFrame优化视觉更新
                requestAnimationFrame(() => {
                    progressBar.style.width = value + '%';
                });
                
                // 如果是去库存达标率，更新箭头和进度条颜色
                if (type === 'inventory') {
                    updateArrow(value, previousValues[type]);
                    // 如果数值较上次减少，进度条变绿色
                    if (value < previousValues[type]) {
                        progressBar.classList.remove('bg-primary');
                        progressBar.classList.add('bg-green-500');
                    } else if (value > previousValues[type]) {
                        // 数值增加，恢复默认颜色
                        progressBar.classList.remove('bg-green-500');
                        progressBar.classList.add('bg-primary');
                    }
                }
                
                // 更新上次值
                previousValues[type] = value;
            }
            
            // 恢复显示和隐藏状态
            container.classList.remove('hidden');
            editArea.classList.add('hidden');
        }, 100); // 100ms防抖延迟
            
            // 隐藏编辑区域，显示值
            container.classList.remove('hidden');
            editArea.classList.add('hidden');
        }
        
        // 更新箭头显示
        function updateArrow(currentValue, previousValue) {
            const arrowElement = document.getElementById('inventory-arrow');
            
            if (currentValue > previousValue) {
                // 上升 - 科技感红色箭头设计（无边框）
                arrowElement.className = 'ml-1 inline-flex items-center justify-center';
                arrowElement.innerHTML = '<span class="text-red-500" style="font-size: inherit; font-weight: bold; text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,0,0,0.8), 0 0 15px rgba(255,0,0,0.6);">↑</span>';
            } else if (currentValue < previousValue) {
                // 下降 - 科技感绿色箭头设计（无边框）
                arrowElement.className = 'ml-1 inline-flex items-center justify-center';
                arrowElement.innerHTML = '<span class="text-green-500" style="font-size: inherit; font-weight: bold; text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(0,255,0,0.8), 0 0 15px rgba(0,255,0,0.6);">↓</span>';
            } else {
                // 不变 - 清空箭头
                arrowElement.innerHTML = '';
            }
        }
        
        // 日期编辑功能 - 优化版
        function toggleDateEdit() {
            const dateContainer = getElement('date-container');
            const dateInputs = getElement('date-inputs');
            
            dateContainer.classList.toggle('hidden');
            dateInputs.classList.toggle('hidden');
        }
        
        // 保存日期范围 - 优化版
        const saveDateRange = debounce(function() {
            const startDate = getElement('start-date').value;
            const endDate = getElement('end-date').value;
            
            if (startDate && endDate) {
                // 格式化为YYYY/MM/DD
                const formattedStart = startDate.replace(/-/g, '/');
                const formattedEnd = endDate.replace(/-/g, '/');
                getElement('date-range').textContent = formattedStart + ' — ' + formattedEnd;
            }
            
            toggleDateEdit();
        }, 100); // 100ms防抖延迟
        
        // 按Enter键保存编辑
        document.getElementById('sales-completion-input').addEventListener('keyup', function(e) {
            if (e.key === 'Enter') saveEdit('sales-completion');
        });
        
        document.getElementById('inventory-input').addEventListener('keyup', function(e) {
            if (e.key === 'Enter') saveEdit('inventory');
        });
        
        // 在DOM完全加载后执行所有初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 核心编辑模式状态管理 - 优化版
            let isEditMode = false;
            let clickCount = 0;
            let lastClickTime = 0;
            const CLICK_THRESHOLD = 1500; // 增加到1.5秒，减少误触
            
            // 简单的切换编辑模式函数 - 优化版
            function toggleEditMode() {
                if (isEditMode) {
                    // 退出编辑模式
                    isEditMode = false;
                    getElement('sales-completion-container').classList.remove('cursor-pointer');
                    getElement('inventory-container').classList.remove('cursor-pointer');
                    getElement('date-container').classList.remove('cursor-pointer');
                    
                    // 隐藏编辑模式提示
                    const notification = getElement('edit-mode-notification');
                    if (notification) notification.style.display = 'none';
                } else {
                    // 进入编辑模式
                    isEditMode = true;
                    getElement('sales-completion-container').classList.add('cursor-pointer');
                    getElement('inventory-container').classList.add('cursor-pointer');
                    getElement('date-container').classList.add('cursor-pointer');
                    
                    // 显示编辑模式提示
                    let notification = getElement('edit-mode-notification');
                    if (!notification) {
                        notification = document.createElement('div');
                        notification.id = 'edit-mode-notification';
                        notification.style.cssText = `
                            position: fixed;
                            top: 16px;
                            right: 16px;
                            background-color: #007bff;
                            color: white;
                            padding: 8px 16px;
                            border-radius: 8px;
                            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                            z-index: 100;
                            font-size: 14px;
                        `;
                        notification.textContent = '编辑模式已激活 - 点击数字可编辑';
                        document.body.appendChild(notification);
                    } else {
                        notification.style.display = 'block';
                    }
                    
                    // 3秒后自动隐藏提示
                    setTimeout(() => {
                        if (notification) notification.style.display = 'none';
                    }, 3000);
                }
                
                // 无论哪种模式切换都重置计数
                clickCount = 0;
                lastClickTime = 0;
            }
            
            // 对话框缓存
            let dialogCache = null;
            
            // 创建并显示确认对话框 - 优化版
            function showCloseConfirmDialog() {
                // 使用requestAnimationFrame优化渲染
                requestAnimationFrame(() => {
                    // 移除可能存在的旧对话框
                    const oldDialog = getElement('close-confirm-dialog');
                    if (oldDialog) oldDialog.remove();
                    
                    // 尝试从缓存中获取对话框
                    if (!dialogCache) {
                        // 缓存不存在，创建新的
                        dialogCache = document.createElement('div');
                        dialogCache.id = 'close-confirm-dialog';
                        dialogCache.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-[1000]';
                        
                        const dialogContent = document.createElement('div');
                        dialogContent.className = 'bg-white rounded-lg p-6 shadow-lg max-w-[360px] w-[90%]';
                        
                        dialogContent.innerHTML = `
                            <h3 class="text-lg font-semibold mb-4 text-gray-800">关闭编辑模式</h3>
                            <p class="text-gray-600 mb-6 leading-relaxed">确定要关闭编辑模式吗？</p>
                            <div class="flex justify-end gap-4">
                                <button id="cancel-close-button" class="px-4 py-2 border border-gray-300 rounded bg-white text-gray-600 cursor-pointer text-sm">取消</button>
                                <button id="confirm-close-button" class="px-4 py-2 border-none rounded bg-blue-500 text-white cursor-pointer text-sm">关闭</button>
                            </div>
                        `;
                        
                        dialogCache.appendChild(dialogContent);
                    }
                    
                    // 克隆缓存的对话框
                    const dialog = dialogCache.cloneNode(true);
                    document.body.appendChild(dialog);
                    
                    // 绑定按钮事件
                    dialog.querySelector('#cancel-close-button').addEventListener('click', function() {
                        dialog.remove();
                    });
                    
                    dialog.querySelector('#confirm-close-button').addEventListener('click', function() {
                        toggleEditMode();
                        dialog.remove();
                    });
                    
                    // 点击对话框外部关闭
                    dialog.addEventListener('click', function(e) {
                        if (e.target === dialog) {
                            dialog.remove();
                        }
                    });
                });
            }
            
            // 全局点击事件处理 - 优化版
            // 使用事件委托和节流优化点击事件处理
            const handleGlobalClick = debounce(function(e) {
                // 只有在非编辑模式下才进行点击计数
                if (!isEditMode) {
                    const now = Date.now();
                    
                    // 重置计时器
                    if (now - lastClickTime > CLICK_THRESHOLD) {
                        clickCount = 0;
                    }
                    
                    clickCount++;
                    lastClickTime = now;
                    
                    // 5次点击进入编辑模式
                    if (clickCount === 5) {
                        clickCount = 0; // 重置计数
                        toggleEditMode();
                    }
                }
            }, 50); // 轻微防抖
            
            document.addEventListener('click', handleGlobalClick);
            
            // 右键点击事件 - 优化版
            // 使用节流优化右键点击事件
            const handleContextMenu = debounce(function(e) {
                if (isEditMode) {
                    e.preventDefault(); // 阻止默认右键菜单
                    showCloseConfirmDialog();
                    return false;
                }
                return true;
            }, 100); // 100ms节流
            
            document.addEventListener('contextmenu', handleContextMenu);
            
            // 修改saveEdit函数，保存后退出编辑模式
            const originalSaveEdit = saveEdit;
            saveEdit = function(type) {
                originalSaveEdit(type);
                
                if (isEditMode) {
                    toggleEditMode();
                }
            };
            
            // 编辑区域点击事件绑定 - 优化版
            // 使用事件委托优化点击事件绑定
            const handleElementClick = debounce(function(e) {
                if (!isEditMode) return;
                
                const target = e.target;
                
                // 检查是否点击了sales-completion-container或其子元素
                if (target.closest('#sales-completion-container')) {
                    toggleEdit('sales-completion');
                }
                // 检查是否点击了inventory-container或其子元素
                else if (target.closest('#inventory-container')) {
                    toggleEdit('inventory');
                }
                // 检查是否点击了date-container或其子元素
                else if (target.closest('#date-container')) {
                    toggleDateEdit();
                }
            }, 50);
            
            // 只绑定一个事件监听器
            document.addEventListener('click', function(e) {
                // 先处理全局点击计数
                handleGlobalClick(e);
                // 再处理元素特定点击
                handleElementClick(e);
            });
        });
        
        // 年度倒计时功能 - 优化版
        function updateCountdown() {
            const now = new Date();
            const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59);
            const diff = endOfYear - now;
            
            if (diff <= 0) {
                document.getElementById('countdown-timer').textContent = '00天00时00分00秒';
                return;
            }
            
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            
            // 缓存DOM引用
            const timerElement = document.getElementById('countdown-timer');
            if (timerElement) {
                timerElement.textContent = 
                    days.toString().padStart(2, '0') + '天' +
                    hours.toString().padStart(2, '0') + '时' +
                    minutes.toString().padStart(2, '0') + '分' +
                    seconds.toString().padStart(2, '0') + '秒';
            }
        }
        
        // 初始化倒计时并优化更新频率
        updateCountdown();
        // 对于倒计时，每秒一次更新是必要的，但我们可以确保在页面不可见时暂停更新
        let countdownInterval = setInterval(updateCountdown, 1000);
        
        // 页面可见性变化时暂停/恢复计时器
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                clearInterval(countdownInterval);
            } else {
                updateCountdown(); // 立即更新一次
                countdownInterval = setInterval(updateCountdown, 1000);
            }
        });
        
        // 页面加载时初始化箭头状态
        document.addEventListener('DOMContentLoaded', function() {
            // 初始值为0，没有变化，不显示箭头
            const arrowElement = document.getElementById('inventory-arrow');
            arrowElement.innerHTML = '';
        });
    </script>
</body>
</html>